<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';


	// #ifdef APP-PLUS
	import wfc from "@/wfc/client/wfc";
	// #endif



	let router = useRouter()
	const userStoreInfo = userStore();
	// let userInfo = ref(userStoreInfo.getUserInfo)
	const userRole = ref(userStoreInfo.getUserFlag)
	const {
		proxy,
	} = getCurrentInstance()
	let topThreeNum = reactive({
		collect: 0,
		fabu: 0,
		juan: 0
	})

	let state = reactive({
		shortInfo: {},
		shortStatus: '',
		orderStatusList: [
			{ val: -1, text: "全部", key: 'allOrderNum' },
			{ val: 0, text: "待接单", key: 'pendingOrderNum' },
			{ val: 1, text: "待服务", key: 'pendingServiceNum' },
			{ val: 2, text: "待验收", key: 'pendingAcceptanceNum' },
			{ val: 3, text: "已完成", key: 'finishedNum' }
		],
		shortWorkInfo: {},
		resumeInfo: {} //简历信息
	})
	onShow(() => {
		getMyCommunityCount()
		getCollectCount()
		userStoreInfo.updateUserInfo(userStoreInfo.userInfo.id)
		getJuan()
		if (userRole.value == '0') {
			meiyeRecruitHunterInfo2DetailsFun()
		}

	})

	// 获取个人简历详情
	const meiyeRecruitHunterInfo2DetailsFun = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.meiyeRecruitHunterInfo2Details).then((res) => {
			if (res.code === 200) {
				state.resumeInfo = res.result
				// if(res.result.workPicture){
				// 	res.result.workPictureArr = res.result.workPicture.split(',')
				// }else{
				// 	res.result.workPictureArr = []
				// }

				// if(res.result.credentials){
				// 	res.result.credentialsArr = res.result.credentials.split(',')
				// }else{
				// 	res.result.credentialsArr = []
				// }


				// state.personInfo = res.result

			}
		})
	}

	const getJuan = () => {
		//获取我优惠卷总数，只要未使用的  status: 0,
		proxy.$req('POST', proxy.$api.xiadanJuan, {
			status: 0,
			pageNo: 1,
			pageSize: 100
		}).then((res) => {
			console.log(res);
			// uni.$u.toast(res.message)
			if (res.success) {
				topThreeNum.juan = res.result.records.length
			}
		})
	}
	const getMyCommunityCount = () => {
		proxy.$req('GET', proxy.$api.mineFabuNum, {}).then((res) => {
			topThreeNum.fabu = res.result
		})
	}
	const getCollectCount = () => {
		proxy.$req('GET', proxy.$api.getCollectCount, { memberId: userStoreInfo.getUserInfo.id }).then((res) => {
			topThreeNum.collect = res.result
		})
	}
	const routerLink = (e) => {
		if (userRole.value == '0' && e == 'vipbackup' && state.resumeInfo.isVip != 1) {
			router.push({
				name: 'buyVip',
				params: {}
			})
		} else {
			router.push({
				name: e,
				params: {}
			})
		}

	}
	const tuichu = () => {
		// #ifdef APP-PLUS
		wfc.disconnect();
		// #endif


		userStoreInfo.loginOut().then(() => {
			uni.showLoading({})
			uni.removeStorageSync('userInfo')
			setTimeout(() => {
				uni.hideLoading()
				router.replaceAll({
					name: 'choseRole',
					params: {}
				})
			}, 900)
		})
	}
	//服务
	let localService = ref([])
	const getFatherScreen = function (id = '') {
		proxy.$req('GET', proxy.$api.localService, {
			id,
		}).then((res) => {
			console.log(res);
			localService.value = res.result
			zhuanrang()
		})
	}();
	let zhuanrangList = ref([])
	const zhuanrang = () => {
		proxy.$req('GET', proxy.$api.localService, {
			id: localService.value[1].id,
		}).then((res) => {
			console.log(res);
			zhuanrangList.value = res.result
		})
	}
	const localServiceRouter = (params, id, item) => {
		params.sId = id
		params.itemm = item
		router.push({
			name: 'serviceCenter',
			params,
		})
	}
	const marketLink = (e, data) => {
		router.push({
			name: e,
			params: {
				data: JSON.stringify(data),
			}
		})
	}
	//获取营销中心分类
	let marketScreenList = ref([])
	const getMarket = () => {
		proxy.$req('GET', proxy.$api.marketScreen, {}).then((res) => {
			console.log(res);
			marketScreenList.value = res.result
		})
	}
	getMarket()
	//获取短时工详情
	const meiyeShortWorkersInfoFun = () => {
		proxy.$req('GET', proxy.$api.meiyeShortWorkers3QueryById).then((res) => {
			console.log(res);
			state.shortInfo = res.result
		})
	}
	//获取短时工状态
	const myShortWorkerInfoFun = () => {
		let url = ''
		if (userRole.value == '0') {
			url = proxy.$api.myShortWorkerInfo
		} else {
			url = proxy.$api.getMyShortWordersOrder3List
		}
		proxy.$req('GET', url, { memberId: userStoreInfo.getUserInfo.id }).then((res) => {
			console.log(res);
			state.shortStatus = res.result.status
			state.shortWorkInfo = res.result.shortWorkInfo

		})
	}
	myShortWorkerInfoFun()
	meiyeShortWorkersInfoFun()

	//去订单
	const goOrder = (id, current) => {
		router.push({
			name: 'myOrder',
			params: {
				id,
				current,
			}
		})
	}
	const goZhuanrang = (id) => {
		router.push({
			name: 'pushMakeover',
			params: {
				id,
			}
		})
	}
</script>
<template>
	<view class="mineAccount">
		<u-navbar :placeholder="true" bgColor="rgba(0,0,0,0)" height="60rpx">
			<template #left>
				<view></view>
			</template>
			<template #center>
				<view></view>
			</template>
			<template #right>
				<view class="r-flex-center-center" style="margin-top: 20rpx;">
					<view class="" @click="tuichu">
						<u-icon name="/static/icon/checkout.png" size="74rpx" style="margin-right: 26rpx;"></u-icon>
					</view>
					<view class="" @click="routerLink('setting')">
						<u-icon name="/static/icon/setting.png" size="74rpx"></u-icon>
					</view>
				</view>
			</template>
		</u-navbar>
		<view class="maTop">
			<view class="mal">
				<image :src="userStoreInfo.userInfo.avatar" v-if="userStoreInfo.userInfo.avatar" mode=""></image>
				<image src="../../static/logo.png" v-else mode=""></image>
			</view>
			<view class="mam">
				<text v-if="userStoreInfo.userInfo.nickname">{{ userStoreInfo.userInfo.nickname }}</text>
				<text v-else @click="routerLink('choseRole')">点击登录</text>
				<text>{{ userStoreInfo.userInfo.phone }}</text>
			</view>
		</view>
		<view class="vipCard">
			<view class="vt1 c-flex-start-start">
				<text class="">
					{{ userStoreInfo.userFlag==0?userStoreInfo.userInfo.isVip==0?'开通美业VIP':'续费美业VIP':'' }}
					{{ userStoreInfo.userFlag==1?userStoreInfo.userInfo.businessVip==0?'开通美业VIP':'续费美业VIP':'' }}
					{{ userStoreInfo.userFlag==2?userStoreInfo.userInfo.supplierVip==0?'开通美业VIP':'续费美业VIP':'' }}
				</text>
				<text style="font-size: 24rpx;margin-top: 14rpx;">享众多权益</text>
				<text style="font-size: 24rpx;margin-top: 6rpx;">
					{{ userStoreInfo.userFlag==0?userStoreInfo.userInfo.isVip==0?'':userStoreInfo.userInfo.vipTime||''+' 到期':'' }}
					{{ userStoreInfo.userFlag==1?userStoreInfo.userInfo.businessVip==0?'':userStoreInfo.userInfo.businessVipTime||''+' 到期':'' }}
					{{ userStoreInfo.userFlag==2?userStoreInfo.userInfo.supplierVip==0?'':userStoreInfo.userInfo.supplierVipTime||''+' 到期':'' }}
				</text>
			</view>
			<text class="vt2" @click="routerLink('maxVip')">
				{{ userStoreInfo.userFlag==0?userStoreInfo.userInfo.isVip==0?'立即开通':'立即续费':'' }}
				{{ userStoreInfo.userFlag==1?userStoreInfo.userInfo.businessVip==0?'立即开通':'立即续费':'' }}
				{{ userStoreInfo.userFlag==2?userStoreInfo.userInfo.supplierVip==0?'立即开通':'立即续费':'' }}
			</text>
		</view>
		<view class="mcRecord">
			<view class="mcrItem" v-if="userStoreInfo.userFlag == 2" @click="routerLink('gysMyCollect')">
				<text>{{ topThreeNum.collect || 0 }}</text>
				<text>我的收藏</text>
			</view>
			<view class="mcrItem" @click="routerLink('myCollect')" v-else>
				<text>{{ topThreeNum.collect||0 }}</text>
				<text>我的收藏</text>
			</view>
			<view class="mcrItem" @click="routerLink('myCommunity')">
				<text>{{ topThreeNum.fabu||0 }}</text>
				<text>我的发布</text>
			</view>
			<view class="mcrItem" @click="routerLink('myJuan')">
				<text>{{ topThreeNum.juan||0 }}</text>
				<text>我的优惠券</text>
			</view>
		</view>
	</view>
	<view class="mineContent">
		<!-- <view class="q-line"></view> -->
		<view class="mcOrder" v-if="userRole==1 || userRole==0">
			<view class="mcoTit">
				<text> {{ userRole==0?'我的订单':'商城订单' }}</text>
				<view @click="goOrder('',0)">查看全部<u-icon name="arrow-right" color="rgba(0,0,0,0.45)"></u-icon></view>
			</view>
			<view class="mcoStatus">
				<view class="sItem" @click="goOrder(1,1)">
					<image src="../../static/icon/order1.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="sItem" @click="goOrder(2,2)">
					<image src="../../static/icon/order2.png" mode=""></image>
					<text>待发货</text>
				</view>
				<view class="sItem" @click="goOrder(3,3)">
					<image src="../../static/icon/order3.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="sItem" @click="goOrder(6,4)">
					<image src="../../static/icon/order5.png" mode=""></image>
					<text>待寄还</text>
				</view>
				<view class="sItem" @click="goOrder(-1,6)">
					<image src="../../static/icon/order5.png" mode=""></image>
					<text>退款/售后</text>
				</view>
			</view>
		</view>
		<!-- <view class="mcOrder" v-if="userRole==1">
			<view class="mcoTit">
				<text>短时工订单</text>
				
			</view>
			<view class="mcoStatus">
				<view class="sItem">
					<image src="../../static/logo.png" mode=""></image>
					<text>全部</text>
				</view>
				<view class="sItem">
					<image src="../../static/logo.png" mode=""></image>
					<text>待接单</text>
				</view>
				<view class="sItem">
					<image src="../../static/logo.png" mode=""></image>
					<text>待服务</text>
				</view>
				<view class="sItem">
					<image src="../../static/logo.png" mode=""></image>
					<text>待验收</text>
				</view>
				<view class="sItem">
					<image src="../../static/logo.png" mode=""></image>
					<text>已完成</text>
				</view>
			</view>
		</view> -->
		<view class="mcOrder" v-if="userRole==2">
			<view class="mcoTit">
				<text>我的营销</text>
				<!-- <view>查看全部<u-icon name="arrow-right"></u-icon> </view> -->
			</view>
			<view class="mcoStatus">
				<view class="sItem" v-for="(item,index) in marketScreenList" :key="index"
					@click="marketLink('marketing',item)">
					<image :src="item.url" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="mcOrder" v-if="userRole==2">
			<view class="mcoTit">
				<text>我的服务</text>
				<!-- <view>查看全部<u-icon name="arrow-right"></u-icon> </view> -->
			</view>
			<view class="mcoStatus">
				<view class="sItem" v-for="(item,index) in localService" :key="index" @click="localServiceRouter(item)">
					<image :src="item.url" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<!-- <view class="mcOrder" v-if="userRole==1">
			<view class="mcoTit">
				<text>转让发布</text>
				<view @click="goZhuanrang(localService[1].id)">立即发布<u-icon name="arrow-right"></u-icon></view>
			</view>
			<view class="mcoStatus" style="display: flex;justify-content: space-around;">
				<view class="sItem" v-for="(item,index) in zhuanrangList" :key="index"
					@click="localServiceRouter(localService[1],index+1,item)">
					<image src="../../static/icon/dpzr.png" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view> -->

		<view class="shortTimeWork" v-if="userRole==0 && state.shortStatus == -1">
			<view class="q-line"></view>
			<view class="stwTit">
				成为短时工
			</view>
			<view class="stwBtm" @click="routerLink('becomeWorker')">
				<text class="apply">立即申请</text>
			</view>
		</view>
		<view class="shortTimeWork2" v-if="(userRole==0 && state.shortStatus != -1) || userRole==1">
			<view class="q-line"></view>
			<view class="main-info">
				<view class="info1">
					<view class="name" v-if="userRole==1">短时工订单</view>
					<view class="name" v-else>短时工</view>
					<view class="jl" @click="routerLink('becomeWorker')" v-if="userRole!=1">我的短时工简历</view>
					<view class="jl" @click="routerLink('employWorker')" v-else>发布需求</view>
				</view>
				<view class="info2" v-if="userRole!=1">
					<view class="info2-item">
						<text>{{state.shortInfo.username}}</text>
						<text>{{state.shortInfo.workeAge}}年|{{state.shortInfo.jobId}}|{{state.shortInfo.serviceStarRating}}星</text>
					</view>
					<text class="status" v-if="state.shortInfo.status==0">待审核</text>
					<text class="status" v-if="state.shortInfo.status==1">审核通过</text>
					<text class="status" v-if="state.shortInfo.status==2">审核未通过</text>
				</view>
				<view class="info3" @click="routerLink('shortTimeOrder')" v-if="userRole==1">
					<view class="info3-item" v-for="(item,idx) in state.orderStatusList" :key="idx">
						<text>{{state.shortWorkInfo[item.key]}}</text>
						<text>{{item.text}}</text>
					</view>
				</view>
				<view class="info3" @click="routerLink('shortOrder')" v-else>
					<view class="info3-item" v-for="(item,idx) in state.orderStatusList" :key="idx">
						<text>{{state.shortWorkInfo[item.key]}}</text>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="stwTit">
				成为短时工
			</view>
			<view class="stwBtm" @click="routerLink('becomeWorker')">
				<text class="apply">立即申请</text>
			</view> -->
		</view>
		<view class="lawService" v-if="userRole==1" style="background-image: url('../../static/images/serviceBg.png');">
			<view class="q-line"></view>
			<view class="lsTit">
				转让发布
			</view>
			<view class="lsBtm">
				<text>一键发布转让信息</text>
				<text class="lsApply" @click="goZhuanrang(localService[1].id)">立即发布</text>
			</view>
		</view>
		<view class="myJob" v-if="userRole==0">
			<view class="q-line"></view>
			<view class="mjTit">
				我的求职
			</view>
			<view class="mjFun">
				<view class="mjfItem" @click="routerLink('onlineResume')" style="background-image: url('../../static/images/jianliBg.png');background-size: 100% 100%;
color: #4B5258;">
					<text>在线简历</text>
					<text style="color: color: rgba(75,82,88,0.75);;">更快找到工作</text>
				</view>
				<view class="mjfItem" @click="routerLink('vipbackup')"
					style="background-image: url('../../static/images/qiuzhiBg.png');background-size: 100% 100%;color: #744B3F;">
					<text>求职神器</text>
					<text style="color: rgba(116,75,63,0.75);">一顿饭换份好工作</text>
				</view>
			</view>
			<view class="mjMsg r-flex-between-center">
				<view class="mjItem r-flex-center-center" @click="routerLink('haveCommunicated')">
					<text>{{state.resumeInfo.connectNumber || 0}}</text>
					<text>已沟通过</text>
				</view>
				<view class="mjItem r-flex-center-center" @click="routerLink('myInterview')">
					<text>{{state.resumeInfo.communicateNumber || 0}}</text>
					<text>我的面试</text>
				</view>
				<view class="mjItem r-flex-center-center" @click="routerLink('myDeliver')">
					<text>{{state.resumeInfo.receivedNumber || 0}}</text>
					<text>已投简历</text>
				</view>
			</view>
		</view>
		<!-- <view class="myJob" v-if="userRole==1">
			<view class="mjTit">
				<text>转让发布</text>
				<text>立即发布</text>
			</view>
			<view class="mjMsg">
				<view class="mjItem">
					<text>0</text>
					<text>空房转让</text>
				</view>
				<view class="mjItem">
					<text>0</text>
					<text>设备仪器转让</text>
				</view>
				<view class="mjItem">
					<text>0</text>
					<text>整点转让</text>
				</view>
			</view>
		</view> -->
		<view class="lawService" v-if="userRole==2">
			<view class="q-line"></view>
			<view class="lsTit">
				我的招商
			</view>
			<view class="lsBtm">
				<text>一键发布招商信息</text>
				<text class="lsApply" @click="routerLink('investmentCenter')">立即查看</text>
			</view>
		</view>
		<view class="lawService">
			<view class="q-line"></view>
			<view class="lsTit r-flex-start-center">
				<image src="../../static/icon/lawIcon.png" mode=""></image>
				法律服务
			</view>
			<view class="lsBtm">
				<text>足不出户 在线申请</text>
				<text class="lsApply" @click="routerLink('lawServe')">立即申请</text>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.mineAccount {
		width: 100%;
		height: 672rpx;
		background-image: url('../../static/images/mineBg.png');
		background-size: 100% 100%;

		.maTop {
			width: 686rpx;
			height: 112rpx;
			margin: 30rpx auto 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.mal {
				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 70rpx;
					margin-right: 16rpx;
				}
			}

			.mam {
				width: 450rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				text:nth-child(1) {
					font-size: 40rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
				}
			}


		}

		.vipCard {
			width: 622rpx;
			height: 170rpx;
			padding: 0 32rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background-image: url('../../static/images/vipCard.png');
			background-size: 100% 100%;

			.vt1 {
				margin-top: 32rpx;
				font-size: 32rpx;
				color: #fff;
			}

			.vt2 {
				width: 176rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 30rpx;
				background-image: url('../../static/images/vipBtn.png');
				background-size: 100% 100%;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin-top: 48rpx;
			}

		}

		.mcRecord {
			width: 686rpx;
			margin: 36rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.mcrItem {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;

				text:nth-child(1) {
					font-size: 40rpx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 10rpx;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}
	}


	.mineContent {
		width: 686rpx;
		margin: 0 auto;
		// height: 500rpx;
		// background-color: #ffffff;
		margin-top: -80rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		padding: 0 0 20rpx;



		.mcOrder {
			width: 100%;
			margin: 20rpx auto;
			height: 240rpx;
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;

			.mcoTit {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// border-bottom: 1rpx solid #000;
				padding: 0 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);

				view {
					display: flex;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}

			.mcoStatus {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.sItem {
					height: 130rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					image {
						width: 96rpx;
						height: 96rpx;
					}

					font-size: 22rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
				}
			}
		}

		.shortTimeWork {
			width: calc(100% - 84rpx);
			margin: 0rpx auto;
			height: 192rpx;
			padding: 0 42rpx;
			background-image: url('../../static/images/duanshigongBg.png');
			background-size: 100% 100%;

			.stwTit {
				margin-top: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(70, 39, 39, 0.85);
			}

			.stwBtm {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// text:nth-child(1) {
				// 	font-size: 26rpx;
				// }

				.apply {
					width: 170rpx;
					height: 50rpx;
					background: #FE6B3D;
					border-radius: 32rpx;
					text-align: center;
					line-height: 50rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 22rpx;
				}
			}




		}

		.shortTimeWork2 {
			width: calc(100% - 84rpx);
			margin: 0rpx auto;
			padding: 40rpx 42rpx;
			// height:300rpx;
			background-image: url('../../static/images/buyVipjuxing.png');
			background-size: 100% 100%;

			.main-info {
				display: flex;
				flex-direction: column;

				.info1 {
					display: flex;
					justify-content: space-between;
					padding-bottom: 20rpx;

					// padding:30rpx 0;
					.name {
						color: rgba(0, 0, 0, 0.85);
						font-size: 32rpx;
					}

					.jl {
						color: rgba(0, 0, 0, 0.65);
						font-size: 24rpx;
					}
				}

				.info2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0;
					color: rgba(0, 0, 0, 0.65);
					font-size: 24rpx;

					.info2-item {
						text:nth-child(1) {
							font-size: 28rpx;
							padding-right: 20rpx;
						}
					}

					.status {
						border: 2rpx solid #CB645E;
						border-radius: 4rpx;
						padding: 8rpx 16rpx;
					}
				}

				.info3 {
					display: flex;

					.info3-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;

						text:nth-child(1) {
							font-weight: 600;
						}

						text:nth-child(2) {
							font-size: 24rpx;
						}
					}

				}
			}
		}


		.myJob {
			width: calc(100% - 64rpx);
			margin: 20rpx auto;
			height: 336rpx;
			padding: 0 32rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			background-color: #FFFFFF;

			.mjTit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 700;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-top: 18rpx;
			}

			.mjFun {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 18rpx;

				.mjfItem {
					width: 300rpx;
					height: 136rpx;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;

					text {
						margin-left: 30rpx;
					}

					text:nth-child(1) {
						font-size: 32rpx;
						font-weight: 500;
					}

					text:nth-child(2) {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(75, 82, 88, 0.75);
						margin-top: 8rpx;
					}
				}
			}

			.mjMsg {
				width: 100%;
				margin: 40rpx auto;
				// display: flex;
				// justify-content: space-around;
				// align-items: center;
				padding-bottom: 40rpx;

				.mjItem {
					width: 33%;
					// display: flex;
					// flex-direction: column;
					// align-items: center;

					text:nth-child(1) {
						font-size: 40rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}

					text:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.45);
					}
				}
			}
		}

		.lawService {
			width: 622rpx;
			margin: 20rpx auto;
			height: 190rpx;
			padding: 0 32rpx;
			background-image: url('../../static/images/falvBg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.lsTit {
				margin-top: 50rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
				}
			}

			.lsBtm {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text:nth-child(1) {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}

				.lsApply {
					width: 130rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 8rpx;
					background-color: #2989FF;
					margin-left: 44rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>